<template>
    <div>
        <!-- 面包屑导航
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb> -->
        <!-- 用户列表主题 -->
        <!-- 卡片视图区 -->
        <el-card>
            <el-row :gutter="25"> <!-- 间隙 -->
                <el-col :span="10"> <!-- 列宽 -->
                    <!-- 搜索栏，搜索添加 -->
                    <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="10"> <!-- 列宽 -->
                    <!-- 添加按钮 -->
                    <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户表格: border边框 stripe斑马 -->
            <el-table :data="userList" border stripe :rules="addFormRules">
                <el-table-column label="ID" type="index"></el-table-column>  <!-- 索引列 -->
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="密码" prop="password"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="角色" prop="role"></el-table-column>
                <el-table-column label="状态" prop="state">
                    <!-- 作用域插槽 -->
                    <template slot-scope="scope">
                        <!-- {{scope.row}}每一行封装的数据，取出状态码 -->
                        <el-switch v-model="scope.row.state"
                         :active-value="1"
                        :inactive-value="0"
                        @change="userStateChange(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <!-- 自定义插槽 -->
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
                        <!-- 删除 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
                        <!-- 权限 -->
                        <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">
                            <!-- 文字提示enterable -->
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 size-change每页最大数量 current-change当前页面变化处  layout功能组件-->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
        <!-- 新增用户区域 -->
        <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
            <!-- ref:提取节点，减少DOM节点的消耗，通过节点取值 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <!-- 角色 -->
                <el-form-item label="角色" prop="role">
                    <template>
                        <el-select v-model="addForm.role" placeholder="请选择">
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <!-- 状态 -->
                <el-form-item label="状态" prop="state">
                    <template>
                        <el-select v-model="addForm.state" placeholder="请选择">
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="adduser">确定</el-button>
            </span>
        </el-dialog>

        <!-- 修改用户区域 -->
        <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <!-- ref:提取节点，减少DOM节点的消耗，通过节点取值 -->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password"></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>
                <!-- 角色 -->
                <el-form-item label="角色" prop="role">
                    <template>
                        <el-select v-model="editForm.role" placeholder="请选择">
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="edituserInfo">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
            // 请求进行码
            queryInfo:{
                query: "", //查询信息
                pageNum: 1, //当前页码
                pageSize: 5, //每页条数
            },
            userList:[], //用户列表
            total: 0, // 总记录数
            addDialogVisible: false, //对话框状态
            // 添加表单信息
            addForm: {
                username: '',
                password: '',
                email: '',
                role: '',
                state: ''
            },
            // 修改表单验证
            addFormRules: {
                // 校验用户名,"prop"绑定表单中的属性
                username: [
                    // 必填项验证(必填项、提示信息、失去焦点后触发)
                    {required: true, message: '用户名为必填项',trigger: 'blur'}, 
                    {min: 3, max: 5, message: '长度在3到12个字符', trigger: 'blur'} //长度验证
                ],
                // 校验密码
                password: [
                    {required: true, message: '用户密码为必填项', trigger: 'blur'},
                    {min: 6, max: 10, message: '长度在6~10个字符', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'},
                    {min: 5, max: 15, message: '请输入正确邮箱地址', trigger: 'blur'}
                ]
            },
            options1:[
                {value:'超级管路员', label:'超级管理员'},
                {value:'普通用户', label:'普通用户'}
            ],
            options2:[
                {value:'true', label:'显示'},
                {value:'false', label:'不显示'}
            ],
            // 修改用户信息
            editForm:{
                username: '',
                password: '',
                email: '',
                role: '',
                state: ''
            },
            // 显示隐藏修改用户栏
            editDialogVisible: false,
            // 修改表单验证
            editFormRules: {
                // 校验密码
                password: [
                    {required: true, message: '用户密码为必填项', trigger: 'blur'},
                    {min: 6, max: 10, message: '长度在6~10个字符', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'},
                    {min: 5, max: 15, message: '请输入正确邮箱地址', trigger: 'blur'}
                ]
            },
        }
    },
    created () {
        this.getUserList();
    },
    methods: {
        // 获取所有用户
        async getUserList(){
            // data 用@RequestBody来接收；params 用@RequestParams来接收
            const {data:res} = await this.$http.get("alluser",{params: this.queryInfo})
            this.userList = res.data;
            this.total = res.total;
        },
        // 页面变化
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getUserList();
        },
        // pageNum的触发动作
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getUserList();
        },
        // 修改用户状态
        async userStateChange(userInfo){
            const {data:res} = await this.$http.put(`/userstate?id=${userInfo.id}&state=${userInfo.state}`)
            if(res!="success"){
                userInfo.id = !userInfo.id;
                return this.$message.error("操作失败");
            }
            this.$message.success("操作成功");
        },
        // 添加用户---取消
        addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },
        // 添加用户---确定
        adduser(){
            this.$refs.addFormRef.validate(async valid=>{
                console.log(valid);
                if(!valid) return;
                const {data:res} = await this.$http.post("/adduser",this.addForm)
                if(res!="success"){
                    return this.$message.error("操作失败");
                }
                this.$message.success("操作成功");
                this.addDialogVisible = false;
                this.getUserList();
            });
        },
        // 删除用户
        async deleteUser(id){
            const confirmResult = await this.$confirm('此操作将永久删除用户，是否继续？','提示',{
                confirmButtonText:'确定',
                cancelButtonText: '取消',
                type:'warming'
            }).catch(err => err);
            if(confirmResult!='confirm'){// 取消
                return this.$message.info('已取消删除');
            }
            const {data:res} = await this.$http.delete("deleteuser?id="+id);
            if(res!='success'){
                return this.$message.error('删除失败');
            }
            this.$message.success('删除成功');
            this.getUserList();
        },
        // 修改用户
        showEditDialog(user){
            this.editForm = user;
            this.editDialogVisible = true;
        },
        // 进行修改
        edituserInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                console.log(111)
                if(!valid) return;
                // 发起修改请求
                const {data:res} = await this.$http.put("edituser",this.editForm);
                if(res!="success"){
                    return this.$message.error("修改失败");
                }
                this.$message.success("修改成功");
                this.editDialogVisible = false;
                this.getUserList();
            })
        },
        // 
        editDialogClosed(){
            // 关闭窗口 重置信息
            this.$refs.editFormRef.resetFields();
        }
                
    }
}
</script>
<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
}

</style>